<template>
    <div class="container" :info="getCardValueList">
        <div v-if="!propJson.editFlag">
            <el-row :gutter="propJson.gutterSize" :style="rowStyle"
                    v-for="(item, itemIndex) in elRows" :key="item.id">
                <el-col :span="propJson.cardSpan" v-for="(colItem, colLength) in item" :key="item.id">
                    <el-card style="width: 100%;" :shadow="propJson.shadowType">
                        <div class="itemClass" v-for="itemColInfo in propJson.list" >
                            <component :is="itemColInfo.component" :propJson="itemColInfo.propJson" :commonParam="cardSonCommonParam(colLength, elRows, itemIndex)">
                                <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                    <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                                </template>
                            </component>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div v-if="propJson.editFlag" :info="getCardValueList">
            <el-card :style="execClass" :body-style="execBodyClass"
                     :shadow="propJson.shadowType">
                <div style="text-align: center;">
                    <span style="font-size: 13px; color: #606266">设计态只展示单个卡片，运行态渲染所有卡片</span>
                </div>
                <br/>
                <draggable v-if="propJson.editFlag"
                           :list="propJson.list"
                           animation="300"
                           :force-fallback="true"
                           :group="{name:'lowcode'}"
                           class="draggableClass"
                           item-key="id"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="editCardSonCommonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element)"/>
                            <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element)"/>
                        </div>
                    </template>
                </draggable>
            </el-card>
        </div>
    </div>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";
import {getCommonParamObj} from "@/utils/commonParamUtil";
import {doThirdServiceValue} from "@/request/lowcode/thirdService";
import jsonpath from "jsonpath";

export default {
    name: "CardListComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            itemFlag: true,
            cardListValue: [],
            elRows: []
        }
    },
    components: {
        draggable
    },
    methods: {
        changeComponentInfo(element) {
            this.$store.state.currentDrawer = element.drawerComponent;
            this.$store.state.currentDrawerElementId = element.id;
            this.$store.state.currentDrawerTitle = element.title;
            let copyJson = deepCopy(element.propJson)
            this.$store.commit('changeLowCodeDrawerJsonInfo', copyJson)
            this.$store.state.isShowDrawer = true;
            this.$store.state.lowCodeComponentList = this.propJson.list
        },
        deleteComponent(element) {
            let colList = this.propJson.list
            // 获取当前列的LIST
            let index = -1;
            // 遍历当前列表，删除元素ID对应的数据
            for (let i = 0; i < colList.length; i++) {
                if (colList[i].id === element.id) {
                    index = i;
                }
            }
            if (index >= 0) {
                this.propJson.list.splice(index, 1);
            }
        },
        execCardValueListThen(resValue, execParam) {
            // 解析参数
            for (let i = 0; i < this.propJson.paramVariableList.length; i++) {
                let variableList = this.propJson.paramVariableList[i]
                // 从返回的结果中解析值
                let jsonPath = variableList.globalVariableParamName
                let commonParamObj = getCommonParamObj(this.commonParam, variableList.globalVariableName)
                let result = ""
                if (commonParamObj.variableType === "Array") {
                    result = jsonpath.query(resValue, jsonPath)
                } else {
                    result = jsonpath.query(resValue, jsonPath)[0]
                }
                commonParamObj.variableValue = result
                this.cardListValue = result
            }
        },
        execCardValueListCatch(resValue) {

        },
        cardSonCommonParam(colLength, elRows, itemIndex) {
            let index = itemIndex * elRows[0].length + colLength;
            let cardSonCommonParam = deepCopy(this.commonParam)
            // 编辑泰下没个字段都赋值第一个数据
            for (let i = 0; i < this.propJson.paramVariableList.length; i++) {
                let variableList = this.propJson.paramVariableList[i]
                let commonParamObj = getCommonParamObj(cardSonCommonParam, variableList.globalVariableName)
                let value = commonParamObj.variableValue
                commonParamObj.variableType = "String"
                commonParamObj.variableValue = value[index]
            }
            return cardSonCommonParam;
        },
        async doElRows() {
            let elRows = []
            let infoList = this.cardListValue;
            if (this.propJson.editFlag && !infoList) {
                elRows = [[1]]
                return elRows
            }
            // 根据当前卡片的宽度判断要分为几行展示
            let colNum = Math.floor(24 / this.propJson.cardSpan);
            let colInfo = []
            let colIndex = 0;
            for (let i = 0; i < infoList.length; i++) {
                if (colIndex >= colNum) {
                    colIndex = 0;
                    elRows.push(colInfo)
                    colInfo = []
                }
                colInfo.push(infoList[i])
                colIndex++
            }
            if (colIndex > 0) {
                elRows.push(colInfo)
            }
            this.elRows = elRows
        }
    },
    computed: {
        execClass() {
            let style = "";
            style += "width: 99.9%;"
            if (this.propJson.cardHeightType === "CUSTOM") {
                style += "height: " + this.propJson.cardHeight + ";";
            }
            return style;
        },
        execBodyClass() {
            let style = "";
            style += "padding: 0;";
            if (this.propJson.cardPaddingTop !== '') {
                style += "padding-top: " + this.propJson.cardPaddingTop + ";";
            }
            if (this.propJson.cardPaddingBottom !== '') {
                style += "padding-bottom: " + this.propJson.cardPaddingBottom + ";";
            }
            if (this.propJson.cardPaddingLeft !== '') {
                style += "padding-left: " + this.propJson.cardPaddingLeft + ";";
            }
            if (this.propJson.cardPaddingRight !== '') {
                style += "padding-right: " + this.propJson.cardPaddingRight + ";";
            }
            if (this.propJson.cardBodyWidth !== '') {
                style += "width: " + this.propJson.cardBodyWidth + ";";
            }
            return style
        },
        async getCardValueList() {
            if (this.propJson.editFlag) {
                return;
            }
            await doThirdServiceValue(this.propJson.cardListValueParam, this.commonParam, this.execCardValueListThen, this.execCardValueListCatch, {})
            await this.doElRows()
        },
        rowStyle() {
            let style = "";
            style += "margin-bottom:" + this.propJson.rowHeight + "px;";
            return style
        },
        slotList() {
            let res = getCommonParamObj(this.commonParam, "templateSlotInfo")
            return res.variableValue;
        },
        editCardSonCommonParam() {
            let cardSonCommonParam = deepCopy(this.commonParam)
            // 编辑泰下没个字段都赋值第一个数据
            for (let i = 0; i < this.propJson.paramVariableList.length; i++) {
                let variableList = this.propJson.paramVariableList[i]
                let commonParamObj = getCommonParamObj(cardSonCommonParam, variableList.globalVariableName)
                let value = commonParamObj.variableValue
                commonParamObj.variableType = "String"
                commonParamObj.variableValue = value[0]
            }
            return cardSonCommonParam;
        }
    }
}
</script>

<style scoped lang="less">
.draggableContainer {
    width: 98%;
    height: 85vh;
    margin-left: 1%;
    padding-top: 0.2%;
    transition: box-shadow 0.3s ease;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    //去除光标
    caret-color: transparent;
    overflow: auto;
    .draggableClass {
        width: 100%;
        height: 100%;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}

.draggableContainer:hover {
    cursor: pointer;
}

.cardClass {
    width: 100%;
    height: 10vh;
}
</style>